<template>
        <div>
            <mt-search v-model="value" @input.native="searchList($event)"></mt-search> 
             <mt-navbar class="page-part" v-model="selected">
          <mt-tab-item id=" " @click.native="tabClassify">全部新闻</mt-tab-item>     
        <mt-tab-item v-for="(clssify,index) in newsClssify" :key="index" :id="clssify._id" @click.native="tabClassify">{{clssify.title}}</mt-tab-item>
      </mt-navbar>         
            <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="false"  :auto-fill="false" ref="loadmore">
   <mt-cell v-for="(newsList,index) in newsList" :key="index" class="mylist"          
          :title='newsList.title'>
                <img slot="icon" v-lazy="`http://localhost:3000/${newsList.imgObject.filename}`" width="90" height="90">
            </mt-cell>
</mt-loadmore>
        </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      value: "",
      selected:'',
      page:1, 
       allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
      
    };
  },
  computed: {
    ...mapGetters(["newsList","nomore","newsClssify"])
  },
  methods: {
    ...mapActions(["getNewsList","getNewsClassify"]),
    //搜索功能
    searchList(e) {
      var val = e.target.value;
      this.getNewsList({ title: val });
    },
    //切换种类
    tabClassify(){
            this.getNewsList({typeId:this.selected});
      
    },
     loadTop:function() { //组件提供的下拉触发方法  
                        //下拉刷新
        this.page=1;
         this.getNewsList();
        this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位  
      },  
      loadBottom:function() {  // 上拉加载  
        this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位
        this.page++;
        this.getNewsList({page:this.page}) 
       
      },  
        more:function (){  
      
        this.page++;
        this.getNewsList({page:this.page})
        this.isNoMore(this.nomore)
        console.log(this.nomore)
      }, 
       isNoMore:function(isNoMore){  
        // 是否还有下一页，如果没有就禁止上拉刷新  
        this.allLoaded = false;  
        if(isNoMore){           
          this.allLoaded = true;  //true是禁止上拉加载 
        }  
      }    
  },
  created() {
    this.getNewsList();
    this.getNewsClassify();
  }
};
</script>
<style lang="scss">
.mylist .mint-cell-title .mint-cell-text {
  display: inline-block;
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mint-search {
  height: auto;
}
.mint-search .mint-searchbar {
  z-index: 0;
}
.mint-loadmore{
 min-height: 600px;
}
</style>

